﻿<!doctype html>
<html lang="en">
<head>
    <meta charset="gb2312">
    <title>绿色环保社区</title>
    <style type="text/css">
      body{
         background:pink;
         margin:0;
         padding:0;
         font-family:"宋体",Arial,Helvetica,sans-serif;
         font-size:12px;
         line-height:1.5em;
         width:100%;
        }

      a:link, a:visited{
        color:#069;
        text-decoration:underline; 
        }

      a:active, a:hover{
        color:#990000;
        text-decoration:none; 
        }

       #top_bg{
        width:100%;
        background：#7bdaae url(images/top_bg.jpeg) repeat-x; 
        }

       #container{
        width:90%;
        margin:0 auto;
        }

       #header{
        width:100%;
        height:280px;
        }

       #header_logo{
        float:left;
        display:inline;
        width:500px;
        height:20px;
        font-family:Tahoma,Geneva,sans-serif;
        font-size:20px;
        font-weight:bold;
        color:#678275;
        margin:28px 0 0 15px;
        padding:0;
        }
 
      #header_logo span{
        margin-left:10px;
        font-size:11px;
        font-weight:normal;
        color:#000;
        }
  
      #header_bottom{
        float:left;
        width:1000px;
        height:160px;
        background:url(images/header_bottom_bg.jpg) no-repeat;
        margin:15px 0 0 15px;
        }
    
      #menu{
        float:left;
        width:465px;
        height:29px;
        margin:170px 0 0 23px;
        display:inline;
        padding:0;
        }
       
      #menu ul{
        list-style:none;
        display:inline;
        }
      
      #menu ul li{
        float:left;
        padding-left:20px;
        padding-top:5px;
        }

      #menu ul li a{
        font-family:"黑体";
        font-size:16px;
        color:#393;
        text-decoration:none;
        }

      #menu ul li a:hover{
        color:#fff;
        background:#396;
        }

      #content{
        overflow:auto;
        margin:15px;
        padding:0;
        }

      #content_left{
        float:left;
        margin:250px;
        margin:0 0 0 10px;
        padding:0;
        }

      #section{
        margin:0 0 15px 0;
        padding:0;
        }

      #section_1_top{
        width:176px;
        height:36px;
        font-family:"黑体";
        font-weight:bold;
        font-size:14px;
        color:#276b45;
        background:url(images/section_1_top_bg.jpeg) no-repeat;
        margin:0px;
        padding:15px 0 0 70px;
        }
       
      #section_1_mid{
        width:217px;
        background:url(images/section_1_mid_bg.jpeg) no-repeat;
        margin:0;
        padding:5px 15px;
        }

       .myform  .frm_cont{
        margin-bottom:8px;
        }

       .myform  .username input, .myform  .password input{
        width:176px;
        height:36px;
        padding:2px 0px 2px 15px;
        border:solid 1px #aacfe4;
        }

       .myform  .bins{
        text-align:center;
        }
  
       #section_1_bottom{
        width:246px;
        height:17px;
        background:url(images/section_1_bottom_bg.jpg) no-repeat;
        }

       #section2{
        margin:0 0 15px 0;
        padding:0;
        }

       #section_2_top{
        width:176px;
        height:42px;
        font-family:"黑体";
        font-weight:bold;
        font-size:14px;
        color:#276b45;
        background:url(images/section_2_top_bg.jpg) no-repeat;
        margin:0px;
        padding:15px 0 0 70px;
        }
       
       #section_2_mid{
        width:246px;
        background:url(images/section_2_mid_bg.jpeg) no-repeat;
        margin:0;
        padding:5px 0;
        }

       #section_2_mid ul{
        list-style:none;
        margin:0 20px;
        padding:0;
        }

       #section_2_mid li{
        border-bottom:1px dotted #fff;
        margin:0;
        padding:5px;
        }

       #section_2_mid li a{
        color:#fff;
        text-decoration:none;
        }

       #section_2_mid li a:hover{
        color:#363;
        text-decoration:none;
        }

       #section_2_bottom{
        width:246px;
        height:18px;
        background:url(images/section_2_bottom_bg.jpeg) no-repeat;
        }

       #content_right{
        float:right;
        width:580px;
        padding:20px;
        }
  
       .post{
        padding:5px;
        }

       .post h1{
        font-family:Tahoma;
        font-size:18px;
        color:#588970;
        margin:0 0 15px 0;
        padding:0;
        }

       .post p{
        font-family:Arial;
        font-size:14px;
        color:#46574d;
        margin:0 0 15px 0;
        padding:0;
        }

       .post img{
        margin:0 0 0 25px;
        padding:0;
        border:1px solid #333;
        }
     
       #footer{
        font-size:13px;
        color:#232524;
        text-align:center;
        }

    </style>
</head>
<body>
    <div id="top_bg">
     <div id="container">
      <div id="header">
       <div id="header_logo">绿色环保<span>[保护环境，造福人类]</span></div>
        <div id="header_bottom">
         <div id="menu">
          <ul>
           <li><a href="#">关于我们</a></li>
           <li><a href="#">日常工作</a></li>
           <li><a href="#">环境报告</a></li>
           <li><a href="#">环保常识</a></li>
           <li><a href="#">国际合作</a></li>
          </ul>
         </div>
        </div>
       </div>
      <div id="content">
       <div id="content_left">
        <div id="section">
         <div id="section_1_top">用户登录</div>
         <div id="section_1_mid">
          <div class="myform">
           <form action="" method="post">
            <div class="frm_cont username">用户名:
              <label for="username"></label>
              <input type="text" name="username" id="username"/>
             </div>
             <div class="frm_cont password">密 码:
               <label for="password"></label>
               <input type="password" name="password" id="password"/>
             </div>
             <div class="btns">
               <input type="submit" name="button1" id="button1" value="登录"/>
               <input type="button" name="button2" id="button2" value="注册"/>
             </div>
            </form>
           </div>
          </div>
          <div id="section_1_bottom"></div>
         </div>
         <div id="section2">
          <div id="section_2_top">新闻更新</div>
          <div id="section_2_mid"> 
            <ul>
             <li><a href="#" target="_blank">中华鲟的保护环境日益改善</a></li>
             <li><a href="#" target="_parent">电脑社区设置“环保之星”大奖</a></li>
             <li><a href="#" target="_blank">世界环保组织到中国四川考察</a></li>
             <li><a href="#" target="_blank">低碳生活离我们的生活远吗？</a></li>
          </ul> 
         </div>
         <div id="section_2_bottom"></div>  
        </div>
       </div>
       <div id="content_right">
        <div class="post">
          <h1>我们的职责</h1>
          <p>绿色环保社区是大家交流环保知识和发起环保活动的场所。</p>
          <p>生态文明是当今人类社会上更高阶段发展的大势所趋，环境保护一般是指人类为解决现实或潜在的环境问题。</p>
          <p>组织的核心胜任特征是构成组织核心竞争力的重要源泉,协调人类与环境的关系，保护人类的生存环境、保障经济社会的可持续发展而采取的各种行动的总称。</p>
        </div>
        <div class="post">
          <h1>自然美景</h1>
          <a href="#"><img src="images/thumb_1.jpg" width="108" height="108"/></a>
          <a href="#"><img src="images/thumb_2.jpg" width="108" height="108"/></a>
          <a href="#"><img src="images/thumb_3.jpg" width="108" height="108"/></a>
          <a href="#"><img src="images/thumb_4.jpg" width="108" height="108"/></a>
        </div>
       </div>
      </div>
     </div>
   <div id="footer">Copyright &copy; 2018绿色环保社区 ALL Rights Reserved</div>
 </body>
</html>